/**
* @depends jquery.ui.js
*/

(function($) {

	$.widget( 'ui.action_user_picture', {
		
		_init: function() {

			var o = this.element;
			
			o.find( '.Widget_TabPane' ).widget_tabpane();
			
			o.addClass( 'UserPictureWindow' );
			
			$('.Buttons a', o).click( function() {
				o.window( 'close' );
			} );
			
			$('.ByUrl', o).action_user_picture_byurl();
			$('.ByUpload', o).action_user_picture_byupload();
		}
	} );
	
	$.widget( 'ui.action_user_picture_byurl', {
	
		_init: function() {
	
			var o = this.element;
			
			var input = $('input[type=text]', o).input( {
				defaultText: 'http://'
			} );
			
			$('a.Button', o).click( function() {
				$(this).closest( 'form' ).submit();
			} );
			
			$('form', o).submit( function( e ) {
				e.preventDefault();
				$.wajax( 'User_Picture_ByUrl', {
					url: input.attr( 'value' )
				}, function( json ) {
					if( json.status != 'success' ) {
						return false;
					}
					var content = $(json.content);
					o.replaceWith( content );
					content.action_user_picture_sizepanel({
						cancel: function() {
							content.replaceWith( o );
							o.action_user_picture_byurl();
						}
					});
				} );
				return false;
			} );
		}
	} );

	$.widget( 'ui.action_user_picture_byupload', {
	
		_init: function() {
	
			var o = this.element;
			
			var input = $('input[type=text]', o);
			$('input[type=file]', o).change( function() {
				input.attr( 'value', $(this).attr( 'value' ) );
			} );
			
			$('a.Button', o).click( function() {
				$(this).closest( 'form' ).submit();
			} );
			
			$('iframe', o).load( function() {
				var w = this.contentWindow;
				if( !w.json ) {
					return false;
				}
				$.wajax.callback( w.json, function( json ) {
					if( json.status != 'success' ) {
						return false;
					}
					var content = $(json.content);
					o.replaceWith( content );
					content.action_user_picture_sizepanel({
						cancel: function() {
							content.replaceWith( o );
							o.action_user_picture_byupload();
						}
					});
				} );
			} );
		}
	} );
	
	$.widget( 'ui.action_user_picture_sizepanel', {
	
		_init: function() {

			var $this = this;
			if( this.options.cancel ) {
				$('a[action=cancel]', this.element).click( function() {
					$this.options.cancel();
				} );
			}
			
			$('a[action=apply]', this.element).click( function() {
				var o = $this.objs.selection;
				$.wajax( 'User_Picture_Save', {
					image: $this.objs.profileImage.attr( 'src' ).replace( /^.*\//, '' ),
					left: parseInt(o.css( 'left' )),
					top: parseInt(o.css( 'top' ) ),
					width: o.width()
				}, function( json ) {
					if( json.status != 'success' ) {
						return;
					}
					document.location.reload();
				} );
			} );
			
			this.objs = {
				container: $('.Left.Part .Image', this.element),
				profileImage: $('.Left.Part .Image img', this.element),
				selectionImage: $('.Left.Part .Selection img', this.element),
				thumbImage: $('.Right.Part .Thumb.Image img', this.element),
				miniImage: $('.Right.Part .Mini.Image img', this.element),
				shortcutImage: $('.Right.Part .Shortcut.Image img', this.element),
				selection: $('.Selection', this.element)
			}
			
			
			this.dims = {
				image: {
					width: this.objs.profileImage.width(),
				},
				thumb: {
					width: 50
				},
				mini: {
					width: 32
				},
				shortcut: {
					width: 16
				}
			}
			
			this.objs.profileImage.load( function() {
				$this.dims.image.width = $(this).width();
				
				$this.objs.container.css( {
					width: $this.dims.image.width,
					height: $this.dims.image.height
				} );
				
				$this.objs.selection
				.resizable( {
					aspectRatio: true,
					handles: 'n, e, s, w, ne, se, sw, nw',
					containment: $this.objs.container,
					resize: function(e, ui) {
						$this.refresh(ui.position);
					}
				} )
				.draggable( {
					scroll: false,
					containment: $this.objs.container,
					drag: function(e, ui) {
						$this.refresh(ui.position);
					}
				} )
				
				$this.refresh( { left: 0, top: 0 } );
			} );
				
			this.refresh({ left: 0, top: 0 });
		},
		
		refresh: function( pos ) {
			
			var objs = this.objs;
			var dims = this.dims;
			
			var sel = {
				left: pos.left,
				top: pos.top,
				width: objs.selection.width(),
				height: objs.selection.height()
			};
			 
			window.test = sel;
			objs.selectionImage.css( {
				left: (-sel.left) + 'px',
				top: (-sel.top) + 'px'
			} );

			objs.thumbImage.css( {
				left:  Math.ceil(-sel.left*dims.thumb.width/sel.width) + 'px',
				top:  Math.ceil(-sel.top*dims.thumb.width/sel.width) + 'px',
				width: Math.floor(dims.image.width*dims.thumb.width/sel.width) + 'px'
			} );
			
			objs.miniImage.css( {
				left:  Math.ceil(-sel.left*dims.mini.width/sel.width) + 'px',
				top:  Math.ceil(-sel.top*dims.mini.width/sel.width) + 'px',
				width: Math.floor(dims.image.width*dims.mini.width/sel.width) + 'px'
			} );
			
			objs.shortcutImage.css( {
				left:  Math.ceil(-sel.left*dims.shortcut.width/sel.width) + 'px',
				top:  Math.ceil(-sel.top*dims.shortcut.width/sel.width) + 'px',
				width: Math.floor(dims.image.width*dims.shortcut.width/sel.width) + 'px'
			} );
		},
		
		options: {
			cancel: null
		}
	} );

})(jQuery);
